<template>
    <div class="taberTop">
        <div class="taber">
		<van-icon name="bullhorn-o" style="padding-right: 24px;" />订单超过7天就会删除，且无法恢复，请及时保存信息！！！</div>
    <div class="Navigation-bar">
        <div></div>
        <div class="common-header--nav" style="display: flex;">
            <router-link to="/">
                <button>全部商品</button>
            </router-link>
            <router-link to="/help">
                <button>帮助中心</button>
            </router-link>
            <router-link to="/order">
                <button>我的订单</button>
            </router-link>
            <router-view></router-view>
        </div>
        <div class="login-button">
            <router-link :to="store.isLog ? '/order' : '/login'">
                <div v-if="!store.isLog"> 登陆 ｜ 注册</div>
                <div class="user-box" v-if="store.isLog">
                    <img style="width: 50px; height: 50px;border-radius: 50%;" :src="store.userInfo.avatar" alt="">
                    <span style="padding-left: 12px;color: black;">{{ store.userInfo.email
 }}</span>
                </div>
            </router-link>
        </div>
    </div>
    </div>
    
</template>

<script setup>
import { userStore } from "../store/user.js";


const store = userStore();
</script>

<style scoped>
.taberTop{
        position: sticky;
        top: 0;
        z-index: 10;
        height: 100px;
        border-bottom: 1px #cbc9c9 solid;
}
.taber{
    width: 100%;
    height: 33px;
    background-color: black;
    color: #ded6d6;
    line-height: 33px;
    position: absolute;
    top: 0;
    padding: 0;
    margin: 0;
    text-align: center;
}
.Navigation-bar{
      width: 100%;
      height: 65px;
      background-color: #fff;
      position: absolute;
      top: 33px;
      text-align: center;
      display: flex ;
      justify-content: space-around;
      text-align: center;
      line-height: 65px;
}


.common-header--nav button{
    background-color: white;
    color: #000;
    padding: 12px;
	height: 65px;
	display: flex;
	align-items: center;
}
.common-header--nav button:hover{
	color: #ff7f3e;
}
.login-button {
  border-radius: 4px;
  color: #ff7f3e;
  cursor: pointer;
  display: flex;
  font-size: 14px;
  font-weight: 400;
  overflow: hidden;
  padding: 4.8px 10px 4.8px 16px;
}
.user-box{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
